<template>
	<!-- 轮播 -->
	<view class="wrap">
		<swiper class="swiper" :indicator-dots="false" :autoplay="true" :interval="5000" :duration="200" @animationfinish="swiperChange">
			<swiper-item v-for="(item, index) in 3" :index="index" :key="index">
				<view class="swiper-item">
					<image style="width: 100%; background-color: #eeeeee;" mode="widthFix" src="/static/logo.png"></image>
				</view>
			</swiper-item>
		</swiper>
		<view class="dots">  
				<view v-for="(item, index) in 3" :index="index" :key="index">  
						<view class="dot" :class="{ 'active': currentSwiper === index }"></view>  
				</view>  
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentSwiper: 0
			}
		},
		methods: {
			swiperChange(e) {
				this.currentSwiper = e.detail.current
			}
		}
	}
</script>

<style>
/* 轮播图 */
		swiper{
			height: 300upx;
			margin-top: 20upx;
		}
		/* 轮播图父 */
		.wrap{
		  height: auto;
		  position: relative;  
		}  
		
		/*用来包裹所有的小圆点  */
		.dots{  
		  min-width: 96rpx;
		  height: 16rpx; 
		  display: flex;
		  flex-direction: row;
		  position: absolute;
		  // left: 50%;
			// transform: translateX(-48%);
			margin-left: calc((100% - 88upx) /2);
		  bottom: 20rpx;
		}  
		/*未选中时的小圆点样式 */
		.dot{  
		  width: 24rpx;  
		  height: 8rpx; 
		  margin-right: 8rpx;
			border-radius: 4rpx;
		  background-color:rgba(255, 255, 255, .2);
		}  
		/*选中以后的小圆点样式  */
		.active{  
		  background-color: rgba(255, 255, 255, 1);
		}
</style>
